<template>
    <div class="selectDistrict">
        <header>
            <img src="../assets/images/location12.png" alt="">
            <span class="city">{{this.$store.state.location}}</span>
            <input type="text" value="小区/街道/大厦/学校名称">
        </header>
        <div class="current_district">
            当前位置: <span class="location">{{this.$store.state.district}}</span>
        </div>
        <dl>
            <dt>
                <img src="../assets/images/location12.png" alt="">
                <span>附近地址</span>
            </dt>
            <dd @click="changeDistrict(item)" :key="index+'district'" v-for="(item,index) in places">
                {{item}}
            </dd>
        </dl>
    </div>
</template>


<script>
    export default {
        data: function(){
            return {
                places:[]              
            }
        },
        methods:{
            changeDistrict(district){
                this.$store.commit('changeDistrict',district);
                this.$router.go(-1);
            }
        },
        mounted(){
            if(this.$store.state.location == '鞍山'){
                this.places = ['永乐公园','万达广场 A 座'];
            }else if(this.$store.state.location == '沈阳'){
                this.places = ['沈阳大悦城 A 座','太原街'];
            }else if(this.$store.state.location == '大连'){
                this.places = ['大连甘井子区','大连森林公园'];
            }
        }
    }
</script>

<style scoped>
    img {
        width: 15px;
        margin-right: 5px;
    }
    header {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #F2F2F2;
    }

    header input {
        position: relative;
        flex: 1;
        border: 0;
        outline: none;
        padding-left: 17px;
        font-size: 12px;
        line-height: 22px;
        color: #666;
    }
    header::after {
        content:"";
        position: absolute;
        left: 65px;
        width: 15px;
        height: 15px;
        background: url(../assets/images/search.png) no-repeat;
        background-size: 15px 15px;
    }
    .city {
        margin-right: 7px;
    }
    .current_district {
        padding-left: 15px;
        margin: 20px 0 10px;
        font-size: 16px;
        color: #333;
    }
    .location {
        font-weight: 600;
        margin-left: 6px;
        max-width: 140px;
    }
    dl dt {
        display: flex;
        align-items: center;
        padding: 10px;
        color: #999;
    }
    dl dd {
        font-size: 16px;
        padding: 20px 10px 20px 10px;
        border-bottom: 1px solid #F2F2F2;
    }
</style>


